<!DOCTYPE html>
<html lang="zh">
<head>
    <title>查看签到数据演示</title>
    <meta charset="UTF-8">
    <!--css-->
    <style type="text/css">
        body { margin: 0; font-family: "Helvetica,Arial,FreeSans"; color: #000000; font-size: 12px; }
        .demo_main {padding: 10px 20px 20px;}
        .demo_title { padding: 10px; margin-bottom: 10px; background-color: #D3D8E0; border: solid 1px gray; font-size: xx-large}
        .demo_content { padding: 10px; margin-bottom: 10px; border: solid 1px gray; }
        fieldset { border: 1px solid gray; }
        a {color: blue;font-weight: bold;font-size: x-large;}
        .op span {margin-left: 30px}
    </style>
    <!--javascript-->
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="demo_main">
    <fieldset class="demo_title">
        查看签到数据演示
    </fieldset>
    <div class="op">
        <span><a href="javascript:search(1);">按距离最近查询前10条</a></span>
        <span><a href="javascript:search(0);">按地名搜索签到次数最多前10条</a></span>
    </div>

    <fieldset class="demo_content">
        <div style="min-height: 600px; width: 100%;" id="map">
        </div>
        <script type="text/javascript">
            var api = "http://127.0.0.1:8888";
            var lon = 113.261817;
            var lat = 23.153985;

            var markerArr = [
                { placeName: "名称：广州火车站", location:{"lat":lat,"lon":lon}, address: "广东省广州市广州火车站", categoryName: "火车站", checkinNum:"1", photoNum: "2"}
            ];

            var map; //Map实例
            function map_init() {
                map = new BMap.Map("map");
                //第1步：设置地图中心点，广州市
                var point = new BMap.Point(113.312213, 23.147267);
                //第2步：初始化地图,设置中心点坐标和地图级别。
                map.centerAndZoom(point, 13);
                //第3步：启用滚轮放大缩小
                map.enableScrollWheelZoom(true);
                //第4步：向地图中添加缩放控件
                var ctrlNav = new window.BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_TOP_LEFT,
                    type: BMAP_NAVIGATION_CONTROL_LARGE
                });
                map.addControl(ctrlNav);
                //第5步：向地图中添加缩略图控件
                var ctrlOve = new window.BMap.OverviewMapControl({
                    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                    isOpen: 1
                });
                map.addControl(ctrlOve);

                //第6步：向地图中添加比例尺控件
                var ctrlSca = new window.BMap.ScaleControl({
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT
                });
                map.addControl(ctrlSca);

                //第7步：绘制点
                for (var i = 0; i < markerArr.length; i++) {
                    var p0 = markerArr[i].location.lon;
                    var p1 = markerArr[i].location.lat;
                    var maker = addMarker(new window.BMap.Point(p0, p1), i);
                    addInfoWindow(maker, markerArr[i], i);
                }
            }

            // 添加标注
            function addMarker(point, index) {
                var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                    new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25),
                        imageOffset: new BMap.Size(0, 0 - index * 25)
                    });
                var marker = new BMap.Marker(point, { icon: myIcon });
                map.addOverlay(marker);
                return marker;
            }

            // 添加信息窗口
            function addInfoWindow(marker, poi) {
                //pop弹窗标题
                var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.placeName + '</div>';
                //pop弹窗信息
                var html = [];
                html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
                html.push('<tr>');
                html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
                html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
                html.push('</tr>');
                html.push('<tr>');
                html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">分类:</td>');
                html.push('<td style="vertical-align:top;line-height:16px">' + poi.categoryName + ' </td>');
                html.push('</tr>');
                html.push('<tr>');
                html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">签到:</td>');
                html.push('<td style="vertical-align:top;line-height:16px;padding-left: 20px;">' + poi.checkinNum + '次 </td>');
                html.push('</tr>');
                html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">图片签到:</td>');
                html.push('<td style="vertical-align:top;line-height:16px;padding-left: 20px;">' + poi.photoNum + '次 </td>');
                html.push('</tr>');

                html.push('</tbody></table>');
                var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });

                var openInfoWinFun = function () {
                    marker.openInfoWindow(infoWindow);
                };
                marker.addEventListener("click", openInfoWinFun);
                return openInfoWinFun;
            }

            //异步调用百度js
            function map_load() {
                var load = document.createElement("script");
                load.src = "http://api.map.baidu.com/api?v=2.0&ak=PspjwcHDyp13FwuYeqXRtCPRFLNXWRiG&callback=map_init";
                document.body.appendChild(load);
            }
            window.onload = map_load;

            function search(type) {
                if(type == 0) {
                    var placeName = "酒店";
                    var topN = 10;
                    var url = api + "/search?placeName=" + placeName +"&topN=" + topN;
                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: "json",
                        success : function(data) {
                            console.log(data);
                            markerArr = data;
                            map_init();
                        }
                    });
                } else if(type == 1) {
                    var topN = 10;
                    var url = api + "/searchNearby?lon=" + lon + "&lat=" +lat+ "&topN=" + topN;
                    $.ajax({
                        type: "GET",
                        url: url,
                        dataType: "json",
                        success : function(data) {
                            console.log(data);
                            markerArr = data;
                            map_init();
                        }
                    });
                }
             }
        </script>
    </fieldset>
</div>
</body>
</html>